<template>
  <div class="main-con flex1 vbox">
    <div class="toolbar">
      <el-row>
        <el-col :span="6">
          <el-upload
            :on-success="importSuccess"
            :on-change="fileChange"
            ref="expressFile"
            :data="express"
            :auto-upload="false"
            drag
            action="htk/expressCode/importExpressCode"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
        </el-col>
        <el-col :span="4">
          <el-form :model="express" label-width="95px">
            <el-form-item label="产品">
              <el-select clearable filterable v-model="express.prdCode" placeholder="请选择产品">
                <el-option
                  v-for="item in products"
                  :key="item.id"
                  :label="item.prdName"
                  :value="item.prdCode"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="快递类型" prop="expressType">
              <base-select
                v-model.trim="express.expressType"
                dictCode="express_type"
                placeholder="请选择快递类型"
              ></base-select>
            </el-form-item>
            <el-form-item>
              <el-button
                :loading="importing"
                :disabled="!canupload || express.prdCode.length==0 || !express.expressType"
                @click="importExcel"
                type="primary"
                v-auth="'import'"
                plain
                icon="el-icon-upload"
              >开始导入</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="14"></el-col>
      </el-row>
    </div>
    <div class="vbox flex1">
      <div class="toolbar">
        <el-button type="primary" v-auth="'refresh'" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </div>
      <base-table
        code="htk"
        ref="expressTable"
        url="expressCode/getPage"
        :option-btns="optionBtns"
        :cls="columns"
        @handlerOption="handlerOption"
      ></base-table>
    </div>
    <el-dialog :visible.sync="showRecordDialog">
      <base-table
        code="htk"
        :param="expressParam"
        :auto-load="false"
        ref="expressRecordTable"
        url="expressCode/getPageExpressCodeRecords"
        :mheight="300"
        :cls="recColumns"
      ></base-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    let me = this;
    return {
      canupload: false,
      importing: false,
      showRecordDialog: false,
      products: [],
      expressParam: {
        expressCodeId: ""
      },
      express: {
        prdCode: "",
        expressType: "",
        crteMngId: me.$store.state.admin.id
      },
      columns: [
        { prop: "id", label: "ID" },
        { prop: "prdCode", label: "产品编号" },
        { prop: "prdName", label: "产品名称" },
        {
          prop: "expressType",
          label: "快递类型",
          formatter(row) {
            if (row.expressType == 1) {
              return "平邮";
            } else if (row.expressType == 2) {
              return "挂号";
            }
          }
        },
        { prop: "codeCount", label: "剩余单号" },
        { prop: "crteTime", label: "创建时间" }
      ],
      recColumns: [
        { prop: "codeCount", label: "本次导入数量" },
        { prop: "startCode", label: "此次开始单号" },
        { prop: "endCode", label: "此次结束单号" },
        { prop: "crteTime", label: "导入时间", width: 180 }
      ],
      optionBtns: [
        { text: "查看记录", code: "list_view_record", type: "primary" }
      ]
    };
  },
  created() {
    this.getProducts();
  },
  methods: {
    refresh() {
      this.$refs.expressTable.initLoad();
    },
    handlerOption(code, row) {
      console.log(code, row);
      if (code == "list_view_record") {
        this.viewViewRecord(row);
      }
    },
    viewViewRecord(row) {
      this.showRecordDialog = true;
      this.expressParam.expressCodeId = row.id;
      this.$nextTick(() => {
        this.$refs.expressRecordTable.initLoad();
      });
    },
    importExcel() {
      let me = this;
      me.importing = true;
      me.$refs["expressFile"].submit();
    },
    importSuccess() {
      this.importing = false;
      this.express = {
        prdCode: "",
        expressType: "",
        crteMngId: this.$store.state.admin.id
      };
      this.$refs["expressTable"].initLoad();
    },
    getProducts() {
      let me = this;
      me.$http.ajax({
        url: "product/getAll",
        code: "htk",
        success: res => {
          me.products = res;
        }
      });
    },
    fileChange(file, fileList) {
      if (!fileList || fileList.length == 0) {
        this.canupload = false;
      } else {
        this.canupload = true;
      }
    }
  }
};
</script>

<style>
</style>
